<template>
  <div id="up">
    <div>
      <div class="text1">新冠肺炎疫情数据采集云平台</div>
    </div>
    <!-- {{ pcaData }} -->
    <!-- :props="{value:'label'}":是与option的value值类似 将数据对象内的label值作为最终选中的值 -->

    <div class="calendar>">
      <el-calendar> </el-calendar>
    </div>

    <div class="top">
      <el-cascader-panel
        @change="pcaChange"
        :props="{ value: 'label' }"
        v-model="pcaData"
        :options="regionData"
        class="cascader"
      >
      </el-cascader-panel>
      <div class="chart" id="charts"></div>
    </div>

    <!-- <el-cascader
        v-model="pcaData"
        :options="regionData"
        @change="pcaChange"
        :props="{ value: 'label' }"
      ></el-cascader> -->

    <div class="formDivParent">
      <div class="formDiv">
        <!-- status-icon="true" -->
        <el-form
          :model="form"
          :rules="rules"
          ref="ruleForm"
          :label-position="labelPosition"
          label-width="80px"
        >
          <el-form-item size="small" label="确诊" prop="confirmed">
            <el-input
              min="0"
              v-model.number="form.confirmed"
              placeholder="confirmed number "
            ></el-input>
          </el-form-item>
          <el-form-item size="small" label="疑似" prop="suspected">
            <el-input
              min="0"
              v-model.number="form.suspected"
              placeholder="suspected number"
            ></el-input>
          </el-form-item>
          <el-form-item size="small" label="死亡" prop="dead">
            <el-input
              min="0"
              v-model.number="form.dead"
              placeholder="dead number"
            ></el-input>
          </el-form-item>
          <el-form-item size="small" label="治愈" prop="cure">
            <el-input
              min="0"
              v-model.number="form.cure"
              placeholder="cure number"
            ></el-input>
          </el-form-item>
          <el-form-item size="small" label="重症" prop="severe">
            <el-input
              min="0"
              v-model.number="form.severe"
              placeholder="severe number"
            ></el-input>
          </el-form-item>
          <el-form-item size="small" label="境外输入" prop="outside">
            <el-input
              min="0"
              v-model.number="form.outside"
              placeholder="outside number"
            ></el-input>
          </el-form-item>

          <el-form-item>
            <el-button
              @click="submitForm('ruleForm')"
              type="primary"
              icon="el-icon-check"
              >提交</el-button
            >
            <el-button
              @click="resetForm('ruleForm')"
              type="info"
              icon="el-icon-setting"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="tipDiv">
        温馨提示： <br />1. 选中城市<br />2. 录入数据<br />疫情防控，众志成城
      </div>
      <div>
        <el-image :src="src" class="image"></el-image>
      </div>
    </div>
  </div>
</template>

<script>
// regionData是省市区三级联动数据（不带“全部”选项）
import { regionData } from "element-china-area-data";
import axios from "../../utils/request";
let moment = require("moment");
let echarts = require("echarts");
export default {
  data() {
    return {
      src:
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20170826%2F72616e8d22064969976da63b7a3913a1.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1612582346&t=401b8b37df077d245ef4106c73225ec9",
      labelPosition: "right",
      // 省市区数据
      pcaData: "",
      regionData,
      // 提交给后台的数据 表单
      form: {
        country: "中国",
        province: "",
        city: "",
        confirmed: "",
        suspected: "",
        dead: "",
        cure: "",
        severe: "",
        outside: "",
      },
      // 表单验证
      rules: {
        confirmed: [
          {
            required: true,
            message: "请输入正确的确诊人数",
            trigger: "blur",
          },
          {
            type: "number",
            message: "确诊人数必须为数字值",
          },
        ],
        suspected: [
          {
            required: true,
            message: "请输入正确的疑似确诊人数",
            trigger: "blur",
          },
          {
            type: "number",
            message: "疑似确诊人数必须为数字值",
          },
        ],
        dead: [
          {
            required: true,
            message: "请输入正确的死亡人数",
            trigger: "blur",
          },
          {
            type: "number",
            message: "死亡人数必须为数字值",
          },
        ],
        cure: [
          {
            required: true,
            message: "请输入正确的治愈人数",
            trigger: "blur",
          },
          {
            type: "number",
            message: "治愈人数必须为数字值",
          },
        ],
        severe: [
          {
            required: true,
            message: "请输入正确的重症人数",
            trigger: "blur",
          },
          {
            type: "number",
            message: "重症人数必须为数字值",
          },
        ],
        outside: [
          {
            required: true,
            message: "请输入正确的境外输入人数",
            trigger: "blur",
          },
          {
            type: "number",
            message: "境外输入人数必须为数字值",
          },
        ],
      },
      // data: [],
    };
  },
  computed: {},
  methods: {
    async toAdd() {
      let res = await axios.get("/epidemic/pageQuery", {
        params: {
          page: 1,
          pageSize: 10,
        },
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        // 验证省市区数据
        if (this.pcaData.length == 0) {
          this.$notify({
            title: "提示",
            message: "请选择省市区",
            type: "warning",
          });
          return;
        }
        if (valid) {
          // 要保存或更新数据
          let res = await axios.post("/epidemic/saveOrUpdate", this.form);
          this.$notify({
            title: res.status == 200 ? "成功" : "失败",
            message: res.statusText,
            type: res.status == 200 ? "success" : "error",
          });
          this.form = {};
          this.pcaData = [];
          // resetForm(formName);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    moment,
    async pcaChange(val) {
      // console.log(val);
      //   找该省市区当天的数据，如果当天有数据：则在表单中填充，做修改操作；如果没有：表单清空，做新增操作
      let res = await axios.get("/epidemic/pageQuery", {
        params: {
          page: 1,
          pageSize: 10,
          province: val[0],
          city: val[1],
          area: val[2],
          inputTime: moment(new Date()).format("YYYY-MM-DD"),
        },
      });
      // console.log(res.data.list);
      if (res.data.list.length == 0) {
        // 要新增
        this.form = {
          country: "中国",
          province: val[0],
          city: val[1],
          area: val[2],
          confirmed: "",
          suspected: "",
          dead: "",
          cure: "",
          severe: "",
          outside: "",
        };
      } else {
        // 要修改
        this.form = {
          ...res.data.list[0],
        };
      }
    },
    toDraw() {
      let chart = echarts.init(document.getElementById("charts"));
      //   设置配置对象
      let option = this.getOption();
      chart.setOption(option);
    },
    getOption() {
      return {
        color: "orange",
        title: {
          text: "累计疫情状况",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },

        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "value",
          boundaryGap: [0, 0.01],
        },
        yAxis: {
          type: "category",
          data: ["新增确诊", "疑似", "死亡", "治愈", "重症", "境外输入"],
        },
        series: [
          {
            name: "新增确诊",
            type: "bar",
            data: [320, 432, 101, 334, 103, 330],
          },
        ],
      };
    },
  },
  created() {},
  mounted() {
    this.toDraw();
  },
};
</script>
<style >
.up {
  overflow: hidden;
}
th {
  text-align: center !important;
}
.text1 {
  width: 100%;
  height: 50px;
  /* background-color: #0e469d; */
  font-weight: bold;
  color: #ff0000;
  line-height: 50px;
  text-align: center;
  font-size: xx-large;
  /* font-family: "Times New Roman", Georgia, Serif; */
  box-shadow: 0 2px 12px 0 rgba(255, 166, 0, 0.836);
  text-shadow: 5px 5px 5px lightcoral;
  font-family: "华文行楷";
  margin-bottom: 15px;
}
.top {
  height: 225px;
  width: 100%;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.cascader {
  float: left;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 5px;
  height: 205px;
  width: 540px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.chart {
  float: left;
  margin-top: 10px;
  margin-bottom: 10px;
  width: 500px;
  height: 205px;
  /* background-color: khaki; */
  margin-left: 350px;
}
/* BFC 块级格式化上下文 */
.formDivParent {
  /* 清除子元素浮动对父元素产生的影响 */
  /* height: 500px; */
  width: 100%;
  overflow: hidden;
  margin-top: 20px;
  border: 1px orange;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.formDiv {
  /* margin-left: 10px; */
  float: left;
  width: 300px;
  margin-top: 10px;

  /* background-color: lemonchiffon; */
}
.tipDiv {
  float: left;
  font-size: 15px;
  margin-top: 10px;
  margin-left: 35px;
  color: red;
  line-height: 20px;
  font-weight: bold;
  font-family: "楷体";
}
.image {
  float: right;
  margin-top: 10px;
  margin-right: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

  /* width:50%; */
}
.el-calendar-table {
  height: 280px;
  width: 100%;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 10px;
}

.el-calendar-table .el-calendar-day {
  height: 30px;
  text-align: center;
}
</style>